<template>
    <div class="hyjx">
            <!-- <div class="groupTab" @click="onclick"> 
                <p class="tabed">
                    <span>白卡会员精选</span> 
                    <em></em>
                </p>
                <p>
                    <span>红卡会员精选</span> 
                    <em></em>
                </p>
            </div> -->
            <div class="groupTab">
                <van-tabs v-model="active" @click="onclick" title-active-color="red"  background="#F5F6F7" :border="false" >
                    <van-tab title="白卡会员精选"></van-tab>
                    <van-tab title="红卡会员精选"></van-tab>
                </van-tabs>
            </div>
            
            <ul>
                <!-- {{ activeData }} -->
                <li v-for="data in activeData" :key="data.commitId" v-on:click='todetail(data.commonId)'>
                    <a href="javascript:void(0)">
                        <div class="goods-pic">
                            <img :src="data.imageUrl" alt=""> 
                            <p class="save">立省{{data.province}}元</p>
                        </div> 
                        <div class="goods-name">映趣Air plus负离子吹风机</div> 
                        <dl class="goods-price">
                            <span>
                                <img src="https://api.10street.cn/wap/images/oneBuy/priceIcon.png" alt="">
                                ￥<i>{{data.vipPrice}}</i>
                            </span>
                            <em>原价 ￥{{data.goodsPrice}}</em>
                        </dl>
                    </a>
                </li>
            </ul>
        </div>
</template>

<script>
import axios from'axios';
export default {
    // props:['viphyjx_data'],
    data(){
        return {
            active : 0,
            data:[],
            activeData:[]
        }
    },
    // watch:{
    //     'viphyjx_data'(){

    //         // console.log(this.viphyjx_data.itemData[0].goods)
    //         // console.log(this.viphyjx_data.itemData[1].goods)

    //     }
    // },
    methods:{
        
        todetail(index){
            this.$emit('commonId',index)
        },

        onclick(index){

            switch(index){
                // title-active-color="red"
                
                case 0 :
                    this.activeData = this.data[0].goods
                    // this
                    break;
                case 1 : 
                    this.activeData = this.data[1].goods
                    break;
            }
        }
    },
    mounted () {
        axios({
            url:'/app/index/vip'
        })
        .then((data)=>{
            this.data = data.data.itemList[4].itemData;
            this.activeData = this.data[0].goods
            // this.bjdata = data[0]
            // this.hkdata = data[1]

            // console.log(this.activeData)
            // console.log(this.bjdata)
            // console.log(this.hkdata)

        })
    }
}
</script>

<style lang="stylus">
.hyjx
    height 100%
    .groupTab
        margin-bottom 0.1rem
    ul
        margin-top 0.1rem
        padding: 0 0 0.1rem;
        margin: 0 0.15rem;
        height 100%
        display flex
        flex-wrap  wrap
        li
            margin-right: 2%;
            width: 48%;
            height 2.5rem
            background: #fff;
            border-radius: 0.1rem;
            float: left;
            margin-bottom: 0.1rem;
            overflow: hidden;
            padding-bottom: 0.1rem;
            a   
                .goods-pic
                    width: 100%;
                    position: relative;
                    img
                        width: 100%;
                        height: 2rem;
                    .save
                        border-radius: 0.15rem;
                        border: 1px solid #FF4A42;
                        background: #fff;
                        color: #FF4A42;
                        font-size: 0.1rem;
                        position: absolute;
                        top: 0.1rem;
                        left: 0.1rem;
                        padding: 0 0.1rem;
                        height: 0.2rem;
                        line-height: 0.2rem;
                .goods-name
                    color: #333333;
                    font-size: 0.1rem;
                .goods-price
                    span
                        color: #FF4A42;
                        font-size: 0.1rem;
                        img
                            width: 0.11rem;
                            margin: -0.1rem 0.2rem 0 0;                              
                        i
                            font-size: 0.13rem;
                    em
                        color: #999999;
                        font-size: 0.1rem;
                        margin-left: 0.09rem;
</style>


